import React from 'react';
import lightSty from './content/light.module.less';
import darkSty from './content/dark.module.less';
import greSty from './content/gre.module.less';
import themeSwitchByLight from './image/themeSwitchByLight.svg';
import themeSwitchByDark from './image/themeSwitchByDark.svg';
import themeSwitchByGre from './image/themeSwitchByGre.svg';
import { useGetThemeData } from './hook';

export const globalThemeGroup = {
  light: {
    enums: lightSty,
    key: 'light',
    label: '亮色模式',
    icon: themeSwitchByLight,
  },
  dark: {
    enums: darkSty,
    key: 'dark',
    label: '深色模式',
    icon: themeSwitchByDark,
  },
  gre: {
    enums: greSty,
    key: 'gre',
    label: '绿色模式',
    icon: themeSwitchByGre,
  },
};

/**
 * @param colors Array | String 可指定key获取指定色彩（详见tool/theme charts线条色彩)
 * @param n Record<string, string> 可用enums变量
 */
export const getCurrentThemeColors = (colors = [], n = {}) => {
  if (colors?.length === 0) return [];
  let enums = { ...n };
  if (Object.keys(enums).length === 0) {
    const localThemeKey = window.localStorage.getItem('saas-theme') || 'light';
    const globalThemeData = globalThemeGroup[localThemeKey];
    enums = globalThemeData?.enums;
  }
  if (typeof colors === 'string') {
    return enums[colors];
  } else {
    const ehcartColorVars = Object.entries(enums).filter(([k]) => colors.includes(k));
    return colors.map((k) => ehcartColorVars.find(([ik]) => ik === k)[1]);
  }
};

/**
 * @description 根据theme切换src源来变换图片
 * @param {Object | String} srcs 地址组 至少包括两种theme的地址 或者直接提供String
 * @param {Object} args
 */
export const ThemeIcon = (props) => {
  const { srcs, ...args } = props;
  let src;
  if (typeof srcs === 'string') {
    src = srcs;
  } else {
    const themeData = useGetThemeData();
    src = srcs[themeData.key];
  }
  return <img src={src} {...(args || {})} />;
};
